<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich">
    <rich:panel styleClass="wizard">
        <f:facet name="header">
            <h:outputText value="Creating User Account - Step 2" />
        </f:facet>
        <h:panelGrid columns="2">
            <h:outputText value="First Name:"/>
            <h:inputText id="firstname" value="#{signup.user.firstName}" title="First Name" />
            <h:outputText value="Last Name:"/>
            <h:inputText id="lastname" value="#{signup.user.lastName}" title="Last Name" />
            <h:outputText value="Middle Name:"/>
            <h:inputText id="middlename" value="#{signup.user.middleName}" title="Middle Name" />
            <h:outputText value="Gender:"/>
            <h:inputText id="gender" value="#{signup.user.gender}" title="Gender" required="true" requiredMessage="The Gender field is required." />
            <h:outputText value="Birthday:"/>
            <h:inputText id="birthday" value="#{signup.user.birthDate}" title="Birthday" required="true" requiredMessage="The Birthday field is required." >
                <f:convertDateTime type="DATE" pattern="MM/dd/yyyy" />
            </h:inputText>
        </h:panelGrid>
        <a4j:commandButton value="Create" action="#{signup.create}"/>
    </rich:panel>
</ui:composition>